<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	request.setAttribute("webApp", basePath);
	request.setAttribute("web",
			request.getScheme() + "://" + request.getServerName() + ":"
					+ request.getServerPort() + "/");
	request.setAttribute("lib", basePath + "lib/");
	if(request.getAttribute("loaded")==null){
		request.getRequestDispatcher("/system/load.c").forward(request,response);
		return;
	}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>客户聊天窗口</title>
<link rel="stylesheet" href="${lib}layui/font_layer.css">
<link rel="stylesheet" href="${lib}layui/css/layui.css">
<link rel="stylesheet" href="${lib}layui/layer.css">
<link rel="stylesheet" href="${lib}font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${lib}buttons/css/buttons.css">
<link rel="stylesheet" href="${lib}liMarquee/css/liMarquee.css">
<link rel="stylesheet" href="${lib}layui/global.css" charset="utf-8">
<script type="text/javascript" src="${lib}jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="${lib}liMarquee/js/jquery.liMarquee.js"></script>
<script type="text/javascript" src="${lib}jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="${lib}layui/layui.all.js"></script>
<style type="text/css">
.show-wd-list span {
	font-size: 18px;
	padding: 5px 10px;
	color: #393D49;
}
.layui-tag{
	border-radius:3px;
	padding:2px 5px;
	color: #FF5722;
	border:1px solid #FF5722;
	background: #FFF;
	text-align: center;
}
.layui-tag-num{
	border-radius:3px;
	padding:2px 5px;
	color: #2F4056;
	border:1px solid #2F4056;
	background: #FFF;
	text-align: center;
}
.layui-user-title:hover{
	color: #009688;
	transition:color 0.6s;
	cursor: pointer;
}
.layui-lt-show-div{
	height:500px;
	border:1px solid #ccc;
	border-radius:4px;
}
.layui-btn-refresh{
	margin-left: 10px;
	display: none;
}
.layui-info-loading{
	margin-left: 10px;
}
.fly-logo{
	position: absolute;
	left: 15px;
	top: 11px;
}
.top_logo{
	max-height: 40px;
	max-width: 150px;
}
</style>
<script type="text/javascript">
	var ws;
	$(function() {
		//创建跟服务器的 ws连接
		try{
			ws=new WebSocket("ws:127.0.0.1:8080/Jstx/client.c");
			ws.onerror=function(){
				layer.msg("socket 通道 连接出错。");
			};
		}catch(e){
			console.error(e);
			layer.msg("服务器连接失败,请刷新页面重试。");
		}
		var req={
			method:'',
			params:{}
		};
		//用户切换时,触发切换监听的ws请求
		layui.form.on('select(user-list-filter)', function(data){
			req.method="toggle-user";
			req.params={"uuid":data.value};
			ws.send(JSON.stringify(req));
		});      
		layui.form.render();
		$('.show-wd-list').liMarquee({
			drag : false,
			direction : 'up',
			scrollamount : 10,
			runshort : false
		});
	});
	window.onbeforeunload = function(){
		if(ws!=undefined){
			ws.close();
		}
		layer.msg("socket 连接已关闭");
	};
</script>
</head>

<body>
	<div class="fly-header layui-bg-black">
		<div class="layui-container">
			<a class="fly-logo" href="/"> <img
				src="${lib}imgs/luntan_logo.png" alt="资云论坛" class="top_logo">
			</a>
			<ul class="layui-nav fly-nav layui-hide-xs">
				<li
					class="layui-nav-item hvr-underline-from-center top-t-button btn-publish-question"
					style=""><a href="manager.jsp"><i class="layui-icon">&#xe606;</i>聊天</a></li>
				<li
					class="layui-nav-item hvr-underline-from-center top-t-button btn-link-answer"
					style=""><a href="log.jsp"><i class="layui-icon">&#xe60e;</i>历史记录</a></li>
			</ul>
		</div>
	</div>


	<div class="fly-panel fly-column">
		<div class="layui-container">
			<ul class="layui-clear">
				<li class="layui-hide-xs  "><a href="manager.jsp">聊天</a><i
					class="fly-mid"></i></li>
				<li class="layui-hide-xs "><a href="create.jsp">创建客服</a><i
					class="fly-mid"></i></li>
				<li class="layui-hide-xs "><a href="client.jsp">模拟客户</a></li>
			</ul>
		</div>
	</div>
	<div class="layui-container">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md4">
				<div class="fly-panel fly-signin">
					<div class="fly-panel-title">选择客服</div>
					<div class="fly-panel-main fly-signin-main layui-form"
						style="text-align: left;">
						<div class="layui-col-md8">
							<select name="user_list" lay-filter="user-list-filter" lay-verify="" class="">
								<option value="">请选择一个客服账号</option>
								<c:forEach items="${user_list}" var="info" begin="0" step="1">
									<option value="${info.uuid}">${info.name}</option>
								</c:forEach>
							</select>
						</div>
						<div class="layui-col-md4" style="text-align:left;">
							<button class="layui-btn" onclick="location.href='create.jsp';">创建</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md8">
				<div class="fly-panel fly-signin">
					<div class="fly-panel-title">未读消息</div>
					<div class="fly-panel-main fly-signin-main "
						style="text-align: left;position: relative;">
						<div class="layui-col-md10 show-wd-list"
							style="width: 100%;height:100%;position: absolute;top:0;left:0;background: #FFF;">
							<span class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span> <span
								class="layui-col-md12">aaaaaaaaaa</span>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md4">
				<div class="fly-panel">
					<div class="fly-panel-title fly-filter">
						<a class="layui-this">全部</a> <span class="fly-mid"></span> <a
							href="/column/all/unsolved/">在线客户</a> <span class="fly-mid"></span>
						<a href="/column/all/solved/">新消息</a>
					</div>
					<ul class="fly-list online-user-list">
						<li>
							<a class="fly-avatar"> 
								<img src="${lib}/imgs/def_user_img.png" alt="">
							</a>
							<span class="layui-user-title">
								<i class="layui-icon random-color" >&#xe612;</i>1234-1234-12351-12312
							</span>
							<div class="fly-list-info">
								<a class="layui-tag" style="">新消息</a>
								<a class="layui-tag-num" style="">10</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="layui-col-md8">
				<div class="fly-panel">
					<div class="fly-panel-title fly-filter">
						<span>聊天窗口
							<i class="layui-icon layui-btn-refresh" title="刷新" >&#x1002;</i>
							<i class="layui-icon layui-info-loading layui-anim layui-anim-rotate layui-anim-loop" title="加载中..." >&#xe63d;</i>
							</span>
					</div>
					<div class="fly-panel-main fly-signin-main " style="height:700px;">
						<div class="layui-col-md12 layui-lt-show-div" >
						
						</div>
						<hr  style="margin-top: 10px;"/>
						<div class="layui-col-md12 layui-btn-group" style="text-align: right;">
							<button class="layui-button"><i class="layui-icon">&#xe609;</i>发送</button>
							<button class="layui-button"><i class="layui-icon">&#xe640;</i>重置</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="fly-footer" style="background: #FFF;">
		<p>即时通讯 v1.0 by Mr.Li</p>

	</div>

</body>
</body>
</html>
